<template>
  <div>
    <div class="block" style="margin-bottom: 20px;">
      <span class="demonstration" style="margin-right: 20px;">选择日期</span>
      <el-date-picker style="margin-right: 20px;"
          v-model="value1"
          type="daterange"
          align="left"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
      </el-date-picker>
        <el-button plain>今日</el-button>
        <el-button plain>近7日</el-button>
        <el-button plain>近30日</el-button>
    </div>
    <!-- 确保图表容器有明确的宽度和高度 -->
    <div id="order-trend-chart" style="width: 100%; height: 400px;"></div>
    <h3>订单列表</h3>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="orderNumber" label="订单号"></el-table-column>
      <el-table-column prop="origin" label="始发地"></el-table-column>
      <el-table-column prop="destination" label="目的地"></el-table-column>
      <el-table-column prop="customerName" label="客户名称"></el-table-column>
      <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
      <el-table-column prop="goodsQuantity" label="货物数量"></el-table-column>
      <el-table-column prop="totalVolume" label="总体积"></el-table-column>
      <el-table-column prop="totalWeight" label="总重量"></el-table-column>
      <el-table-column prop="freightTotal" label="运费合计"></el-table-column>
      <el-table-column prop="orderTime" label="下单时间"></el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 3, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts"; // 确保正确引入 echarts

export default {
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.findDeliveryAll();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findDeliveryAll();
    },
    findDeliveryAll() {
      axios
          .get(`http://localhost:10086/statistical/delivery/findDeliveryAll/${this.pageNum}/${this.pageSize}`)
          .then((response) => {
            if (response.data.code === 200) {
              console.log(response.data);
              this.tableData = response.data.data.list;
              this.total = response.data.data.total;

              // 模拟订单趋势数据
              const orderTrendData = {
                xAxisData: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"],
                yAxisData: [26, 32, 45, 38, 22, 30, 42, 16, 20, 35, 43, 28],
              };
              this.renderOrderTrendChart(orderTrendData);
            } else {
              console.error("获取订单统计数据失败:", response.data.message);
            }
          })
          .catch((error) => {
            console.error("请求订单统计数据失败:", error);
          });
    },
    renderOrderTrendChart(data) {
      // 确保 DOM 元素已加载
      this.$nextTick(() => {
        const myChart = echarts.init(document.getElementById("order-trend-chart"));
        const option = {
          title: {
            text: "订单趋势",
          },
          tooltip: {
            trigger: "axis", // 显示提示框
          },
          xAxis: {
            type: "category",
            data: data.xAxisData,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: data.yAxisData,
              type: "line",
              smooth: true, // 使线条平滑
              areaStyle: {}, // 填充区域
            },
          ],
        };
        myChart.setOption(option);
      });
    },
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
    };
  },
  mounted() {
    this.findDeliveryAll();
  },
};
</script>